<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p
      class="codepen"
      data-height="265"
      data-theme-id="light"
      data-default-tab="js,result"
      data-user="Mamboleoo"
      data-slug-hash="XWJPxpZ"
      style="
        height: 265px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid;
        margin: 1em 0;
        padding: 1em;
      "
      data-pen-title="Walkers - How to"
    >
      <span
        >See the Pen
        <a href="https://codepen.io/Mamboleoo/pen/XWJPxpZ"> Walkers - How to</a>
        by Louis Hoebregts (<a href="https://codepen.io/Mamboleoo">@Mamboleoo</a
        >) on <a href="https://codepen.io">CodePen</a>.</span
      >
    </p>

    <div
      class="codepen"
      data-prefill='{
    "title": "React Basics Demo",
    "description": "Shows how to use React and React DOM to render a module with props onto the page",
    "tags": ["react", "react-docs-demo"],
    "html_classes": ["loading", "no-js"],
    "head": "&lt;meta name=&#x27;viewport&#x27; content=&#x27;width=device-width, initial-scale=1&#x27;&gt;",
    "stylesheets": "https://unpkg.com/normalize.css@8.0.1/normalize.css",
    "scripts": ["https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js", "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"]
  }'
      style="height: 400px; overflow: auto"
      data-height="400"
      data-theme-id="31205"
      data-default-tab="js,result"
      data-editable="true"
    >
      <pre data-lang="html">
&lt;div id="root"&gt;&lt;/div&gt;
  </pre
      >
      <pre data-lang="scss">
$gray: #ccc;
body {
  background: $gray;
  margin: 0;
  padding: 1rem;
}
.module {
  background: white;
  padding: 1rem;
  border-radius: 4px;
  border: 1px solid #999;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  h1 {
    margin: 0 0 1rem 0;
  }
}
  </pre
      >
      <pre data-lang="babel">
class Welcome extends React.Component {
  render() {
    return &lt;div class="module"&gt;
      &lt;h1&gt;
        Hello, {this.props.name}
      &lt;/h1&gt;
      &lt;p&gt;It's a good day to build websites.&lt;/p&gt;
    &lt;/div&gt;;
  }
}
ReactDOM.render(
  &lt;Welcome name="Chris"&gt;&lt;/Welcome&gt;,
  document.getElementById('root')
);
  </pre
      >
    </div>

    <div class="api"></div>
    <div class="prefill"></div>

    <button
      class="codepen-open"
      data-theme-id="light"
      data-default-tab="js,result"
      data-user="Mamboleoo"
      data-slug-hash="XWJPxpZ"
      data-pen-title="Walkers - How to"
    >
      See the Pen Walkers - How to by Louis Hoebregts (@Mamboleoo) on CodePen.
    </button>
    <button class="codepen-api-open">Open</button>

    <script type="module">
      import {
        loadCodePens,
        openCodePens,
        renderCodePen,
      } from "./src/index.ts";

      loadCodePens();

      renderCodePen(
        {
          "slug-hash": "XWJPxpZ",
          height: 265,
          "theme-id": "light",
          "default-tab": "js,result",
          user: "Mamboleoo",
          title: "Walkers - How to",
        },
        ".api",
      );

      renderCodePen(
        {
          "default-tab": "js,result",
          prefill: {
            title: "React Basics Demo",
            description:
              "Shows how to use React and React DOM to render a module with props onto the page",
            tags: ["react", "react-docs-demo"],
            html_classes: ["loading", "no-js"],
            head: '<meta name="viewport" content="width=device-width, initial-scale=1">',
            stylesheets: "https://unpkg.com/normalize.css@8.0.1/normalize.css",
            scripts: [
              "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js",
              "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js",
            ],
            html: `\
<div id="root"></div>
`,
            css: `\
$gray: #ccc;
body {
  background: $gray;
  margin: 0;
  padding: 1rem;
}
.module {
  background: white;
  padding: 1rem;
  border-radius: 4px;
  border: 1px solid #999;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  h1 {
    margin: 0 0 1rem 0;
  }
}
`,
            js: `\
class Welcome extends React.Component {
  render() {
    return <div class="module">
      <h1>
        Hello, {this.props.name}
      </h1>
      <p>It's a good day to build websites.</p>
    </div>;
  }
}
ReactDOM.render(
  <Welcome name="Chris"></Welcome>,
  document.getElementById('root')
);
`,
            css_pre_processor: "scss",
            js_pre_processor: "babel",
          },
        },
        ".prefill",
      );

      document.querySelector(".codepen-open").addEventListener("click", () => {
        openCodePens(".codepen-open1");
      });

      document
        .querySelector(".codepen-api-open")
        .addEventListener("click", () => {
          renderCodePen({
            "default-tab": "js,result",
            prefill: {
              title: "React Basics Demo",
              description:
                "Shows how to use React and React DOM to render a module with props onto the page",
              tags: ["react", "react-docs-demo"],
              html_classes: ["loading", "no-js"],
              head: '<meta name="viewport" content="width=device-width, initial-scale=1">',
              stylesheets:
                "https://unpkg.com/normalize.css@8.0.1/normalize.css",
              scripts: [
                "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js",
                "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js",
              ],
              html: `\
<div id="root"></div>
`,
              css: `\
$gray: #ccc;
body {
  background: $gray;
  margin: 0;
  padding: 1rem;
}
.module {
  background: white;
  padding: 1rem;
  border-radius: 4px;
  border: 1px solid #999;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  h1 {
    margin: 0 0 1rem 0;
  }
}
`,
              js: `\
class Welcome extends React.Component {
  render() {
    return <div class="module">
      <h1>
        Hello, {this.props.name}
      </h1>
      <p>It's a good day to build websites.</p>
    </div>;
  }
}
ReactDOM.render(
  <Welcome name="Chris"></Welcome>,
  document.getElementById('root')
);
            `,
              css_pre_processor: "scss",
              js_pre_processor: "babel",
            },
          });
        });
    </script>
  </body>
</html>
